---
import Layout from '../layouts/Layout.astro';
import { getEntry, type CollectionEntry } from 'astro:content';
import styles from '@pages-styles/homepage.module.scss';
import { Quotes } from '@components/quotes/Quotes';
import { quotesData } from '@components/quotes/quotesData';
import { LandingPageFWSelector } from '@ag-website-shared/components/landing-pages/LandingPageFWSelector';
import InstallText from '@components/framework-landing-pages/InstallText';
import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
import { Version } from '@ag-website-shared/components/whats-new/components/Version';
import { Icon } from '@ag-website-shared/components/icon/Icon';
import Showcase from '../components/framework-landing-pages/react/sections/showcase/Showcase';
import { parseVersion } from '@ag-website-shared/utils/parseVersion';
import whatsNewData from '@ag-website-shared/content/whats-new/data.json';
import { LandingPageSection } from '@ag-website-shared/components/landing-pages/LandingPageSection';
import { LandingPageFAQ } from '@ag-website-shared/components/landing-pages/LandingPageFAQ';
import { CustomerLogos } from '@components/customer-logos/CustomerLogos';
import { Finance } from 'src/components/demos/examples/finance';
import { ThemeBuilderHomepage } from '@components/theme-builder-homepage/ThemeBuilderHomepage';
import { AutomatedRowGrouping } from '@ag-website-shared/components/automated-examples/AutomatedRowGrouping';
import { AutomatedIntegratedCharts } from '@ag-website-shared/components/automated-examples/AutomatedIntegratedCharts';
import { FrameworkTextAnimation } from '@ag-website-shared/components/framework-text-animation/FrameworkTextAnimation';
import LogoMark from '@components/logo/LogoMark';
import { urlWithPrefix } from '@utils/urlWithPrefix';

const { data: versionsData } = (await getEntry('versions', 'ag-grid-versions')) as CollectionEntry<'versions'>;
const { data: faqData } = (await getEntry('faqs', 'homepage')) as CollectionEntry<'faqs'>;
const { blogPrefix } = whatsNewData['grid'];

const frameworksData = [
    {
        name: 'react',
        url: urlWithPrefix({
            framework: 'react',
            url: './getting-started',
        }),
    },
    {
        name: 'angular',
        url: urlWithPrefix({
            framework: 'angular',
            url: './getting-started',
        }),
    },
    {
        name: 'vue',
        url: urlWithPrefix({
            framework: 'vue',
            url: './getting-started',
        }),
    },
    {
        name: 'javascript',
        url: urlWithPrefix({
            framework: 'javascript',
            url: './getting-started',
        }),
    },
];
---

<!-- Grid font for Quartz theme -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />

<!-- Prefetch customer logos -->
<link
    rel="preload"
    fetchpriority="high"
    as="image"
    href={urlWithBaseUrl('/images/ag-grid-customer-logos.webp')}
    type="image/webp"
/>

<Layout
    title="AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid"
    description={'AG Grid is a feature-rich Data Grid for all major JavaScript frameworks, offering filtering, grouping, pivoting, and more. Free and open-source. Upgrade to Enterprise for advanced features.'}
    showSearchBar={false}
    showDocsNav={false}
>
    <div class={styles.homepageHero}>
        <section class:list={[styles.heroInner, 'layout-max-width-small']}>
            <section class={styles.heroHeadings}>
                <noscript>
                    <h1>The Best JavaScript Grid in the World</h1>
                </noscript>

                <h1 className="text-xl">
                    <span className={styles.heroTopLine}>
                        <span>The Best</span>&nbsp;<FrameworkTextAnimation client:load />
                    </span>
                    <span>Grid in the World</span>
                </h1>

                <h2 class="text-base normal-weight-text">
                    Add high-performance, feature rich, and fully customisable Data Grids to your application in minutes
                    with our free, open source library.
                </h2>
                <div class={styles.heroSectionbuttonContainer}>
                    <div class={styles.heroSectioncta2}>
                        <div class={styles.homepageFrameworks}>
                            <div class:list={[styles.frameworksInner, 'layout-max-width-small']}>
                                <LandingPageFWSelector client:load data={frameworksData} isFullWidth />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <section class={styles.heroSectionDemoContainer}>
            <div class={styles.loadingLogoContainer}>
                <LogoMark isSpinning />
            </div>
            <div class={styles.heroSectionGrid}>
                <Finance client:only="react" gridHeight={450} isSmallerGrid />
            </div>

            <div class={styles.heroLinks}>
                <a
                    id="demos-cta"
                    class:list={[
                        'button-tertiary',
                        styles.heroSectioncta1,
                        'plausible-event-name=react-table-get-started',
                    ]}
                    href={urlWithBaseUrl('./example')}>See demos <Icon name="chevronRight" /></a
                >

                <a
                    id="github-cta"
                    class="button-tertiary"
                    href="https://github.com/ag-grid/ag-grid-demos/tree/main/finance"
                >
                    <Icon name="github" svgClasses={styles.githubIcon} />
                    <span>View on GitHub</span>
                </a>
            </div>
        </section>
    </div>

    <div class={styles.homepageCustomers}>
        <LandingPageSection client:load id="customer-logos">
            <CustomerLogos client:load />
            <Quotes client:load data={quotesData} />
        </LandingPageSection>
    </div>

    <LandingPageSection
        client:load
        id="fastest-data-grid"
        tag="Unbeatable Speed & Performance"
        heading="The Fastest Data Grid In The World"
        subHeading="Handle millions of rows, and thousands of updates per second out of the box, without compromising on performance"
        ctaTitle="Get Started For Free"
        ctaUrl="./getting-started"
        ctaId="get-started-for-free"
        isFramework
        showBackgroundGradient
        client:load
    >
        <section className={styles.automatedRowGroupingOuter}>
            <div className={styles.automatedRowGrouping}>
                <AutomatedRowGrouping client:visible visibilityThreshold={0.2} darkMode={true} />
            </div>
        </section>
    </LandingPageSection>

    <LandingPageSection
        client:load
        id="custom-themes"
        tag="Fully Customisable & Extendable"
        heading="Custom Themes and Components"
        subHeading="Customise your Data Grid styles with our Theming API and extend functionality with your own custom components."
        ctaTitle="Create a Custom Theme"
        ctaUrl={urlWithBaseUrl('/theme-builder/')}
        ctaId="theme-builder-cta"
    >
        <ThemeBuilderHomepage gridHeight={261} client:visible />
    </LandingPageSection>

    <LandingPageSection
        client:load
        id="integrated-charting"
        tag="Built-in Charting"
        headingHtml="Integrated Charts, Powered by <a href='https://www.ag-grid.com/charts/' style='font-weight: 800'>AG Charts</a>"
        subHeadingHtml="<p>Let your users visualise data with charts directly from the Grid. Powered by AG Charts: our <a href='https://www.ag-grid.com/charts/'> JavaScript Charting Library</a></p>"
        ctaTitle="Explore Integrated Charts"
        ctaUrl="./integrated-charts/"
        ctaId="integrated-charting-cta"
        isFramework
        showBackgroundGradient
        client:load
    >
        <section className={styles.automatedIntegratedChartsOuter}>
            <div className={styles.automatedIntegratedCharts}>
                <AutomatedIntegratedCharts client:visible visibilityThreshold={0.8} />
            </div>
        </section>
    </LandingPageSection>

    <LandingPageSection
        client:load
        id="showcase-examples"
        tag="Unlimited Use-cases"
        heading="Trusted By Developers Everywhere"
        subHeading="AG Grid can be found in almost every industry, from Finance and AI, to Databases and Aerospace:"
        ctaTitle="Browse Our Showcase"
        ctaUrl={urlWithBaseUrl('/community/showcase/')}
        ctaId="showcase-cta"
    >
        <Showcase client:load />
    </LandingPageSection>

    <LandingPageSection
        client:load
        id="whats-new"
        tag="Regular Updates & Improvements"
        headingHtml="Latest Features and Enhancements"
        subHeading="With minor releases every 6 weeks, and major releases every 6 months, stay up to date with all of the newest features and improvements to AG Grid Data Grids."
        ctaTitle="See Whats New"
        ctaUrl={urlWithBaseUrl('/whats-new/')}
        ctaId="whats-new-cta"
        showBackgroundGradient
    >
        <div class={styles.latestNewsVersions}>
            {
                versionsData
                    .filter((versionInfo) => versionInfo.version.endsWith('.0')) // Exclude patch releases
                    .slice(0, 3)
                    .map((versionInfo, index) => {
                        if (versionInfo.highlights) {
                            const { major, minor } = parseVersion(versionInfo.version);
                            const blogUrl = `${minor ? `${blogPrefix}${major}-${minor}` : `${blogPrefix}${major}`}/`;
                            return (
                                <Version
                                    client:load
                                    isLatest={index === 0}
                                    blogUrl={blogUrl}
                                    version={versionInfo.version}
                                    date={versionInfo.date}
                                    highlights={versionInfo.highlights}
                                    notesPath={versionInfo.notesPath}
                                />
                            );
                        }
                    })
            }
        </div>
    </LandingPageSection>

    <LandingPageSection
        client:load
        id="faq-section"
        tag="JavaScript Data Grid FAQs"
        heading="Frequently Asked Questions"
        subHeading="How many rows can AG Grid handle? How fast is AG Grid? Is AG Grid free? Answers to these common questions and more."
        sectionClass={styles.faqSection}
    >
        <LandingPageFAQ client:load FAQData={faqData} framework={'react'} />
    </LandingPageSection>
</Layout>

<script>
    import { initScrollClassListener } from '@ag-website-shared/utils/initScrollClassListener';

    initScrollClassListener({
        targetSelector: '.site-header',
        scrolledClass: 'header-scrolled',
        scrollPosition: 566,
    });
</script>
